<template>
	<view class="content">
		<view class="wid100 bacFFF" style="height: 96rpx;">
			<view class="wid90 hei100 mar dis disJuB">
				<view class="foSi25 fowe600 dis disAl" style="height: 90rpx;" @click="xuanClick(0)"
					:style="xuan == 0?'border-bottom: 6rpx solid #37BCC3;color: #37BCC3;':'border-bottom: 6rpx solid #fff;color: #585858;'">
					全部</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 90rpx;" @click="xuanClick(1)"
					:style="xuan == 1?'border-bottom: 6rpx solid #37BCC3;color: #37BCC3;':'border-bottom: 6rpx solid #fff;color: #585858;'">
					待支付</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 90rpx;" @click="xuanClick(2)"
					:style="xuan == 2?'border-bottom: 6rpx solid #37BCC3;color: #37BCC3;':'border-bottom: 6rpx solid #fff;color: #585858;'">
					待收衣</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 90rpx;" @click="xuanClick(3)"
					:style="xuan == 3?'border-bottom: 6rpx solid #37BCC3;color: #37BCC3;':'border-bottom: 6rpx solid #fff;color: #585858;'">
					清洗中</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 90rpx;" @click="xuanClick(4)"
					:style="xuan == 4?'border-bottom: 6rpx solid #37BCC3;color: #37BCC3;':'border-bottom: 6rpx solid #fff;color: #585858;'">
					配送中</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 90rpx;" @click="xuanClick(5)"
					:style="xuan == 5?'border-bottom: 6rpx solid #37BCC3;color: #37BCC3;':'border-bottom: 6rpx solid #fff;color: #585858;'">
					已完成</view>
				<view class="foSi25 fowe600 dis disAl" style="height: 90rpx;" @click="xuanClick(6)"
					:style="xuan == 6?'border-bottom: 6rpx solid #37BCC3;color: #37BCC3;':'border-bottom: 6rpx solid #fff;color: #585858;'">
					已取消</view>
			</view>
		</view>
		<scroll-view style="height: calc(100vh - 96rpx);" class="wid100" scroll-y="true" @scrolltolower="lower">
			<view v-if="list.length == 0" class="wid90 mar fowe800 foSi35 mar-top30">
				<view style="height: 50rpx;"></view>
				<view class="dis disJuC">
					<image src="../../static/zanwu2.png" style="width: 400rpx;height: 300rpx;"></image>
				</view>
				<view class="textCen mar-top20" style="color: #868686;">暂无数据</view>
			</view>
			<block v-for="(item,index) in list" :key="index">
				<view style="height: 1rpx;"></view>
				<view class="wid90 mar bacFFF borRad20 mar-top30" @click="tiaozhuan('/pages/order/particulars?id='+item.id)"
					style="box-shadow: 0rpx 0rpx 10rpx 0rpx rgba(0,0,0,0.1);">
					<view class="wid90 mar dis disAl disJuB" style="height: 96rpx;">
						<view class="dis disAl">
							<image src="../../static/shangjia_icon.png" style="width: 39rpx;height: 35rpx;"></image>
							<view class="foSi35 fowe800 mar-left20">{{item.gasstation.name}}</view>
						</view>
						<view v-if="item.status == 0 " class="fowe800 foSi30" style="color: #FF0000;">待支付</view>
						<view v-if="item.status == 1" class="fowe800 foSi30" style="color: #388E3C;">已支付</view>
						<view v-if="item.status == 2 && item.collect_clerk_id == 0" class="fowe800 foSi30" style="color: #E040FB;">待接单</view>
						<view v-if="item.status == 2 && item.collect_clerk_id != 0" class="fowe800 foSi30" style="color: #536DFE;">待收衣</view>
						<view v-if="item.status == 3" class="fowe800 foSi30" style="color: #FBC02D;">清洗中</view>
						<view v-if="item.status == 4" class="fowe800 foSi30" style="color: #FFEB3B;">配送中</view>
						<view v-if="item.status == 5" class="fowe800 foSi30" style="color: #F57C00;">代发货</view>
						<view v-if="item.status == 6" class="fowe800 foSi30" style="color: #37BCC3;">待收货</view>
						<view v-if="item.status == 7" class="fowe800 foSi30" style="color: #1976D2;">已完成</view>
						<view v-if="item.status == 8" class="fowe800 foSi30" style="color: #9E9E9E;">已取消</view>
						<view v-if="item.status == 9" class="fowe800 foSi30" style="color: #FFEB3B;">申请退款</view>
						<view v-if="item.status == 10" class="fowe800 foSi30" style="color: #388E3C;">退款成功</view>
						<view v-if="item.status == 11" class="fowe800 foSi30" style="color: #FF4081;">退款失败</view>
					</view>
					<view class="wid100" style="border-bottom: 1rpx dashed #E1DFDF;"></view>
					<view class="wid90 mar" style="padding: 25rpx 0;">
						<block v-for="(item1,index1) in JSON.parse(item.goods_info)" :key="index1">
							<view class="dis disAl ">
								<view class="wid25" style="height: 115rpx;">
									<image :src="url+item1.goods_pic" class="hei100" style="width: 115rpx;"></image>
								</view>
								<view style="width: 75%;">
									<view class="foSi25 fowe600 yclh">{{item1.goods_name}}</view>
									<view class="mar-top30 dis disAl disJuB foSi25" style="color: #A8AAAA;">
										<view>×{{item1.nums}}</view>
										<view>¥{{item1.money}}</view>
									</view>
								</view>
							</view>
							<view class="hei20"></view>
						</block>
						<view class="dis disAl disJuB foSi20">
							<view style="color: #A8AAAA;">{{item.createtime}}</view>
							<view class="dis disAl">
								<view style="color: #A8AAAA;">共{{item.piece_num}}件</view>
								<view class="mar-left10">实付款：¥{{item.pay_amount}}</view>
							</view>
						</view>
					</view>
					<view v-if="item.status != 7 && item.status != 8 && item.status != 9 && item.status != 10" class="wid100" style="border-bottom: 1rpx dashed #E1DFDF;"></view>
					<view v-if="item.status == 11" class="wid90 mar hei60 dis disAl foSi25" style="color: #A8AAAA;">{{item.refund_message_fail}}</view>
					<view v-if="item.status != 7 && item.status != 8 && item.status != 9 && item.status != 10 && item.status != 11" class="dis disAl wid90 mar" style="justify-content: flex-end;height: 99rpx;">
						<view @click.stop="tiaozhuan('/pages/wode/service')" class="butt1 dis disAl disJuC foSi25 fowe600 borRad40">联系客服</view>
						<!-- <view v-if="item.status > 2 && item.status < 6" @click.stop="wuliu(item.ordernum)" class="butt2 dis disAl disJuC foSi25 fowe600 borRad40 coFFF mar-left20">查看物流</view> -->
						<view v-if="item.status == 6" @click.stop="shouhuo()" class="butt2 dis disAl disJuC foSi25 fowe600 borRad40 coFFF mar-left20">确认收货</view>
						<view v-if="(item.status > 0 && item.status < 3) || item.status == 11" class="butt2 dis disAl disJuC foSi25 fowe600 borRad40 coFFF mar-left20" @click.stop="open(item.id)">申请退款</view>
						<view v-if="item.status == 0" @click.stop="zhufu(item)" class="butt3 dis disAl disJuC foSi25 fowe600 borRad40 coFFF mar-left20">立即支付</view>
					</view>
				</view>
			</block>
			<view style="height: 50rpx;"></view>
		</scroll-view>
		<!-- <uni-popup ref="popup1" type="center">
			<view class="borRad20 bacFFF hei80 dis disAl disJuC" style="width: 535rpx;">{{ordernum}}</view>
		</uni-popup> -->
		<uni-popup ref="popup" type="center">
			<view class="borRad20 bacFFF" style="width: 535rpx;">
				<view class="dis disAl disJuC foSi35 fowe600" style="height: 102rpx;">退款理由</view>
				<view class="wid100" style="border-bottom: 1rpx dashed #E1DFDF;"></view>
				<view class="wid80 mar mar-top30">
					<view class="dis disAl" @click="tuiXuan = '下错单了'">
						<view v-if="tuiXuan == '下错单了'" class="dis disAl disJuC borRad50" style="width: 30rpx;height: 30rpx;border: 1rpx solid #37BCC3;">
							<view class="borRad50" style="width: 22rpx;height: 22rpx;background-color: #37BCC3;"></view>
						</view>
						<view v-if="tuiXuan != '下错单了'" class="dis disAl disJuC borRad50" style="width: 30rpx;height: 30rpx;border: 1rpx solid #818181;"></view>
						<view class="mar-left30 foSi25" style="color: #616060;">下错单了</view>
					</view>
					<view class="dis disAl mar-top30" @click="tuiXuan = '衣物损坏'">
						<view v-if="tuiXuan == '衣物损坏'" class="dis disAl disJuC borRad50" style="width: 30rpx;height: 30rpx;border: 1rpx solid #37BCC3;">
							<view class="borRad50" style="width: 22rpx;height: 22rpx;background-color: #37BCC3;"></view>
						</view>
						<view v-if="tuiXuan != '衣物损坏'" class="dis disAl disJuC borRad50" style="width: 30rpx;height: 30rpx;border: 1rpx solid #818181;"></view>
						<view class="mar-left30 foSi25" style="color: #616060;">衣物损坏</view>
					</view>
					<view class="dis disAl mar-top30" @click="tuiXuan = '洗护效果不好'">
						<view v-if="tuiXuan == '洗护效果不好'" class="dis disAl disJuC borRad50" style="width: 30rpx;height: 30rpx;border: 1rpx solid #37BCC3;">
							<view class="borRad50" style="width: 22rpx;height: 22rpx;background-color: #37BCC3;"></view>
						</view>
						<view v-if="tuiXuan != '洗护效果不好'" class="dis disAl disJuC borRad50" style="width: 30rpx;height: 30rpx;border: 1rpx solid #818181;"></view>
						<view class="mar-left30 foSi25" style="color: #616060;">洗护效果不好</view>
					</view>
					<view class="dis disAl mar-top30" @click="tuiXuan = '清洗时间太长'">
						<view v-if="tuiXuan == '清洗时间太长'" class="dis disAl disJuC borRad50" style="width: 30rpx;height: 30rpx;border: 1rpx solid #37BCC3;">
							<view class="borRad50" style="width: 22rpx;height: 22rpx;background-color: #37BCC3;"></view>
						</view>
						<view v-if="tuiXuan != '清洗时间太长'" class="dis disAl disJuC borRad50" style="width: 30rpx;height: 30rpx;border: 1rpx solid #818181;"></view>
						<view class="mar-left30 foSi25" style="color: #616060;">清洗时间太长</view>
					</view>
					<view class="dis disAl mar-top30" @click="tuiXuan = '服务态度不好'">
						<view v-if="tuiXuan == '服务态度不好'" class="dis disAl disJuC borRad50" style="width: 30rpx;height: 30rpx;border: 1rpx solid #37BCC3;">
							<view class="borRad50" style="width: 22rpx;height: 22rpx;background-color: #37BCC3;"></view>
						</view>
						<view v-if="tuiXuan != '服务态度不好'" class="dis disAl disJuC borRad50" style="width: 30rpx;height: 30rpx;border: 1rpx solid #818181;"></view>
						<view class="mar-left30 foSi25" style="color: #616060;">服务态度不好</view>
					</view>
					<view class="dis disAl mar-top40" style="justify-content: space-around;">
						<view class="dis disAl disJuC borRad40 butt4 foSi25" @click="close()">取消</view>
						<view class="dis disAl disJuC borRad40 butt5 foSi25 coFFF" @click="tuikuan()">确认</view>
					</view>
					<view style="height: 50rpx;"></view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				url: this.global.url,
				list: [],
				last_page: 0,
				page: 1,
				xuan: 0,
				tuiXuan: '',
				id: null,
				ordernum: ''
			}
		},
		onLoad(option) {
			this.xuan = option.xuan
			this.getList()
		},
		onShow() {},
		methods: {
			wuliu(ordernum){
				this.ordernum = ordernum
				this.$refs.popup1.open() 
			},
			shouhuo(){
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_sh_pay',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token')
					},
					data: {
						id: that.id
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.page = 1
							that.getList()
						}
					}
				});
			},
			tuikuan(){
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_tk_pay',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token')
					},
					data: {
						id: that.id,
						refund_message: that.tuiXuan
					},
					success(res) {
						let result = res.data
						console.log(result)
						if (result.code == 1) {
							that.page = 1
							that.getList()
							that.$refs.popup.close()
						}
					}
				});
			},
			open(id){
				this.id = id
				// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
				this.$refs.popup.open()
			},
			close() {
				this.$refs.popup.close()
			},
			xuanClick(index){
				if(this.xuan != index){
					this.xuan = index
					this.page = 1
					this.getList()
					this.$forceUpdate();
				}
			},
			zhufu(item) {
				let that = this
				if (that.pd) {
					return;
				}
				that.pd = true
				uni.showLoading({
					title: '支付中...'
				})
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_dzf_pay',
					method: 'POST',
					header: {
						'site-id': that.global.site_id,
						"token": uni.getStorageSync('token')
					},
					data: {
						id: item.id
					},
					success: (res) => {
						let result = res.data
						console.log(result)
						uni.requestPayment({
							timeStamp: result.timeStamp,
							nonceStr: result.nonceStr,
							package: result.package,
							signType: 'MD5',
							paySign: result.paySign,
							success: function(res) {
								console.log(res);
								uni.showModal({
									title: '提示',
									content: '支付成功',
									showCancel: false,
									success: function(res) {
										if (res.confirm) {
											setTimeout(function(){
												that.page = 1
												that.getList()
											},1000)
										}
									}
								})
							},
							fail: function(err) {
								console.log('fail:' + JSON.stringify(err));
								// 支付失败
								console.log(err)
								uni.showToast({
									title: '支付失败',
									icon: 'none',
									duration: 2000
								})
							}
						});
					},
					complete() {
						uni.hideLoading()
						that.pd = false
					}
				});
			},
			getList() {
				var that = this;
				uni.request({
					url: that.global.url + '/api/qianyu_petrol/gasstation_pay_order_lists',
					method: "POST",
					header: {
						'site-id': that.global.site_id, //自定义请求头信息
						'token': uni.getStorageSync('token')
					},
					data: {
						status: that.xuan == 0 ? '' : that.xuan == 1 ? 0 : that.xuan == 5 ? 7 : that.xuan == 6 ? 8 : that.xuan,
						gas_station_id: uni.getStorageSync('jiaId'),
						order_type: 0,
						page: that.page,
						limit: 10,
					},
					success(res) {
						let result = res.data
						if (result.code == 1) {
							that.last_page = result.data.last_page
							if(that.page == 1){
								that.list = result.data.data
							}else{
								that.list = that.list.concat(result.data.data)
							}
						}
					}
				})
			},
			lower(e) {
				if (this.last_page > this.page) {
					this.page++
					this.getList()
				}
			},
			tiaozhuan(url) {
				uni.navigateTo({
					url: url
				})
			}
		}
	}
</script>

<style>
	.content {
		background: #F8F9FD;
		min-height: 100vh;
	}
	.butt1{
		width: 156rpx;
		height: 50rpx;
		border: 1px solid #7D7D7D;
		color: #898989;
	}
	.butt2{
		width: 156rpx;
		height: 50rpx;
		background: #37BCC3;
	}
	.butt3{
		width: 156rpx;
		height: 50rpx;
		background: #FF0000;
	}
	.butt4{
		width: 136rpx;
		height: 46rpx;
		border: 1rpx solid #37BCC3;
		color: #37BCC3;
	}
	.butt5{
		width: 136rpx;
		height: 46rpx;
		background: #37BCC3;
	}
</style>